<template>
    <el-form class="form" :inline="true">
        <el-button type="primary" @click="report">刷新</el-button>
        <el-button type="primary" @click="updateChannelData">频道刷新</el-button>
        <el-button type="primary" @click="updateVideoList">列表刷新</el-button>
        <el-button type="primary" @click="updateVideoData">视频刷新</el-button>
    </el-form>
    <div class="table">
        <BasicTableV2 :columns="columns" :loading="loading" :isPage="false" :data="list" align="center" show-overflow
            height="45px">
            <template #home_page="{ row }">
                <el-text style="cursor: pointer;" type="primary" @click="copyTextToClipboard(row.home_page)">{{
                    row.home_page }}</el-text>
            </template>
            <template #avatar_url="{ row }">
                <el-image @click="jumpTo(row.home_page)" :src="row.avatar_url" lazy />
            </template>
            <template #title="{ row }">
                <el-text style="cursor: pointer;" type="primary" @click="openDrawer(row)">{{
                    row.title }}</el-text>
            </template>
        </BasicTableV2>
    </div>
    <Drawer :currentRow="currentRow" ref="drawerRef" />
</template>
<script setup>
import {
    reportApi,
    updateVideoDataApi,
    updateVideoListApi,
    updateChannelDataApi,
} from '@/apis/home.js'
import { copyTextToClipboard } from '@/utils/index.js'
import Drawer from './drawer.vue'
const columns = [
    // {
    //     title: 'channel_id',
    //     field: 'channel_id',
    //     width: 100,
    // },
    {
        title: 'avatar_url',
        field: 'avatar_url',
        // width: 100,
    },
    {
        title: 'name',
        field: 'name',
        // width: 100,
    },
    {
        title: 'title',
        field: 'title',
        // width: 200,
    },
    // {
    //     title: 'home_page',
    //     field: 'home_page',
    // },
    {
        title: 'video_counts',
        field: 'video_counts',
        // width: 120,
    },
    {
        title: 'views',
        field: 'views',
        // width: 80
    },
    {
        title: 'subscribers',
        field: 'subscribers',
        // width: 100
    },
]
const loading = ref(false)
const list = ref([])
const drawerRef = useTemplateRef('drawerRef')
const currentRow = ref(null)

const openDrawer = (row) => {
    nextTick(() => {
        drawerRef.value.open()
    })
    currentRow.value = row
}

const jumpTo = (url) => {
    window.open(url, '_blank')
}
/** 请求数据 */
const report = async () => {
    try {
        loading.value = true
        const res = await reportApi()
        console.log(res);
        if (res.status == 0) {
            list.value = res.data
        } else {
            ElMessage.error(res.message)
        }
    } finally {
        loading.value = false
    }
}
const updateVideoData = async () => {
    const res = await updateVideoDataApi()
}
const updateVideoList = async () => {
    const res = await updateVideoListApi()
}
const updateChannelData = async () => {
    const res = await updateChannelDataApi()
}

onMounted(() => {
    report()
})
</script>
<style lang="scss" scoped></style>